import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, InputItem, Button,Toast} from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './selfInfo.less';

import NavBarItem from '../../../components/WitNavBar/index'
const Item = List.Item;
const empty = require('is-empty');
class Mine extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      passwordOld: [],
      password: [],
      passwordConfirm: []
    }
  }


  /***提交表单**/
  submit = (e) => {
    this.props.form.validateFields({force: true}, (error) => {
      if (!error) {
        if (this.state.password[0] === this.state.passwordConfirm[0]) {
          this.props.dispatch({
            type: 'login/edit',
            payload: {
              id: newsObject[0].administrator[0].id,
              username: newsObject[0].administrator[1].username,
              realname: newsObject[0].administrator[2].realname,
              member_code: newsObject[0].administrator[4].member_code,
              orgs: [{
                org_code: newsObject[1].orgs[0][0].org_code,
                org_zb_code: newsObject[1].orgs[0][1].org_zb_code,
                auth_id: newsObject[0].administrator[3].avatar
              }],
              password: this.state.passwordOld[0],
              is_update_pwd: this.state.password[0],
            },
          });
        }
        else {
          Toast.success('确认密码不一致！', 1);
        }
      } else {
        console.log(error);
      }
    });
  }
  render() {
    const {getFieldProps, getFieldError} = this.props.form;
    const {id, name, phone, idcard, type, short_name, join_org_date, full_member_date} = this.props.mem;
    return (
      <div>
        {/*<NavBarItem title="修改密码"/>*/}
        <form>
          <List renderHeader={() => '设置登陆密码后可以通过手机号或者身份证登陆，密码必须是8~16位字符'}
                renderFooter={() =>
                  <div>
                    <div style={{color: 'red'}}>
                      <div style={{float: 'left', marginRight: '0.05rem'}}><Icon type="cross-circle" size='xxs'/></div>
                      <div style={{float: 'left', marginRight: '0.05rem'}}>旧密码输入有误，请重新输入</div>
                    </div>
                    <div style={{color: 'blue', float: 'right'}}>忘记密码？</div>
                  </div>
                }
          >
            <InputItem
              {...getFieldProps('MemFilter', {rules: [{}], initialValue: phone})}
              cols={1}
              disabled={true}
            >手机号</InputItem>
            <InputItem
              type="password"
              placeholder="请输入旧密码"
              value={this.state.passwordOld}
              onChange={v => this.setState({passwordOld: v})}
            > 旧密码 </InputItem>
            <InputItem
              type="password"
              placeholder="请输入新密码"
              value={this.state.password}
              onChange={v => this.setState({password: v})}
            > 新密码 </InputItem>
            <InputItem
              type="password"
              placeholder="请确认新密码"
              value={this.state.passwordConfirm}
              onChange={v => this.setState({passwordConfirm: v})}
            > 确认新密码 </InputItem>
          </List>
        </form>
        <WhiteSpace size="xl"/>
        <Button
          style={{width: '90%', margin: 'auto auto 0.2rem', backgroundColor: '#ff0000'}}
          type="primary"
          onClick={this.submit}
        >
          完成
        </Button>
      </div>
    )
  }
}
const Form = createForm()(Mine);
function mapStateToProps({manualMember,mem}) {
  return {manualMember,mem}
}
export default connect(mapStateToProps)(Form);
